import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
  Platform,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { TabNavigator } from 'react-navigation';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';
import Prompt from './Prompt';
import TestDriveBill from './TestDriveBill';
import PriceConfigBill from './PriceConfigBill';
import ModalExt from '../../Public/ModalExt';
import PurchaseIntentionFeedback from './PurchaseIntentionFeedback';
import CarColor from './CarColor';
import CarPart from './CarPart';
// import CarDriver from './CarDriver';
import CarAttention from './CarAttention';
import FontFamilys from '../../../utils/FontFamilys';
// const PreferDetailsNavigation = TabNavigator({
//   CarColor: { screen: CarColor,
//     navigationOptions: {
//       tabBarLabel: '车身颜色',
//       tabBarIcon: ({ focused }) => {
//         if (focused) {
//           return <View style={[styles.line, styles.activeTab]} />;
//         }
//         return <View style={styles.line} />;
//       } },
//   },
//   CarAttention: { screen: CarAttention,
//     navigationOptions: {
//       tabBarLabel: '车辆选配',
//       tabBarIcon: ({ focused }) => {
//         if (focused) {
//           return <View style={[styles.line, styles.activeTab]} />;
//         }
//         return <View style={styles.line} />;
//       } },
//   },
//   CarPart: { screen: CarPart,
//     navigationOptions: {
//       tabBarLabel: '车身局部',
//       tabBarIcon: ({ focused }) => {
//         if (focused) {
//           return <View style={[styles.line, styles.activeTab]} />;
//         }
//         return <View style={styles.line} />;
//       },
//     } },
//   CarDriver: { screen: CarDriver,
//     navigationOptions: {
//       tabBarLabel: '试乘试驾',
//       tabBarIcon: ({ focused }) => {
//         if (focused) {
//           return <View style={[styles.line, styles.activeTab]} />;
//         }
//         return <View style={styles.line} />;
//       } },
//   },
// }, {
//   lazy: true, // 是否懒加载
//   initialRouteName: 'CarColor',
//   tabBarPosition: 'top',
//   animationEnabled: false,
//   swipeEnabled: true,
//   tabBarOptions: {
//     activeTintColor: '#F65252', // 当前活动tab字体颜色
//     inactiveTintColor: '#333',  // 默认字体颜色
//     showIcon: true,
//     pressOpacity: 0.8,
//     style: {
//       height: 44,
//       backgroundColor: '#fff',
//       paddingBottom: Platform.OS === 'ios' ? PxToDp(10) : 0,
//       paddingTop: Platform.OS === 'ios' ? 0 : PxToDp(5),
//     },
//     labelStyle: {
//       fontSize: 14,
//       fontFamily: FontFamilys(),
//       marginTop: PxToDp(-25),
//     },
//   },
// });


const Routes = {
  车身颜色: { screen: CarColor },
  车辆选配: { screen: CarAttention },
  车身局部: { screen: CarPart },
  // 试乘试驾: { screen: CarDriver },
};

const TabConfig = {
  stateName: 'PreferDetailsNavigation',
  lazy: true, // 是否懒加载
  initialRouteName: '车身颜色',
  tabBarPosition: 'top',
  animationEnabled: false,
  swipeEnabled: true,
  ...TabNavigator.Presets.AndroidTopTabs,
  tabBarOptions: {
    activeTintColor: '#121212', // 当前活动tab字体颜色
    inactiveTintColor: '#666666',  // 默认字体颜色
    indicatorStyle: {  // 边框设置
      borderBottomColor: '#121212',
      borderBottomWidth: 2,
      width: PxToDp(12),
      marginLeft: PxToDp(68),
    },
    scrollEnabled: true,
    showIcon: false,
    pressOpacity: 0.8,
    style: {
      height: 44,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
      elevation: 0,
    },
    labelStyle: {
      fontSize: 12,
      fontFamily: FontFamilys(),
    },
    tabStyle: {
      width: Platform.OS === 'ios' ? PxToDp(90) : PxToDp(110),
    },
  },
};
const PreferDetailsNavigation = TabNavigator(Routes, TabConfig);

class VehicleVisited extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stageVisible: false,
      feedBackVisible: false,
    };
  }
  _goBack() {
    this.props.navigator.pop();
  }
  _goPrompt(terminology) {
    this.props.navigator.push({
      component: Prompt,
      passProps: {
        terminology,
      },
    });
  }
  _goTestDriveBill() {
    const { user, car } = this.props;
    this.props.navigator.push({
      component: TestDriveBill,
      passProps: { car, user },
    });
  }
  _goPriceConfigBill() {
    const { user, car } = this.props;
    const { bill } = car;
    if (bill) {
      this.props.navigator.push({
        component: PriceConfigBill,
        passProps: { bill, user },
      });
    }
  }

  _setStageVisible(visible) {
    this.setState({ stageVisible: visible });
  }

  _setFeedbackVisible(visible) {
    this.setState({ feedBackVisible: visible });
  }

  _bookDrive(bookdrive) {
    switch (bookdrive) {
      case 3:
        return '已预约';
      case 2:
        return '已申请';
      default:
        return '未申请';
    }
  }

  render() {
    const { user, userType, car, dispatch } = this.props;
    // 性能关注
    const focus = this.props.data ? this.props.data.property_focus ?
                  this.props.data.property_focus : null : null;
    let focusObj = {};
    const focusNew = [];
    if (focus) {
      focus.map((data, i) => {
        focusObj = { id: '', text: '' };
        focusObj.id = i;
        focusObj.text = data;
        focusNew.push(focusObj);
      });
    }
    const terminology = car ? car.terminology ? car.terminology : null : null;
    const { username } = user;
    const { bill } = car;
    const testDrive = car.test_dirve;
    const title = `${username}访问过的车系`;
    const { data } = car;
    const { colors, focuses, wheels, glasses } = data;
    const color = colors && colors[0] && colors[0][1];

    const wheelList = [];
    const wheelListNew = [];
    let Obj = {};
    if (wheels && wheels.length > 0) {
      wheelList.push(wheels[0][1]);
    }
    if (glasses && glasses.length > 0) {
      wheelList.push(glasses[0][1]);
    }
    if (wheelList && wheelList.length > 0) {
      wheelList.map((da, i) => {
        Obj = { id: '', name: '', img: '' }; // 车辆选配关注
        Obj.id = i;
        Obj.name = da.name;
        if (i === 0) {
          Obj.img = require('../../../img/home/hImage1.png');
        } else {
          Obj.img = require('../../../img/home/hImage2.png');
        }
        wheelListNew.push(Obj);
      });
    }

    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon
          currentTitle={title}
          bgColor="#fff"
          onPress={() => this._goBack()}
        />
        <ScrollView style={[styles.flex]}>
          <LinearGradient
            colors={['#1b8bff', '#4cbbff']}
            style={styles.linerTop}
            start={{ x: 0, y: 1 }}
            end={{ x: 1, y: 1 }}
          >
            <View style={[styles.row, styles.topView]}>
              <Image source={require('../../../img/home/hStoreicon.png')} />
              <Text style={styles.titleCar}>{car.carname}</Text>
            </View>

            <View style={styles.intentionInfo} />
            <View style={styles.intentView}>
              <View style={styles.infoUp}>
                <TouchableOpacity
                  activeOpacity={0.6}
                  style={[styles.center, { height: PxToDp(50) }]}
                  onPress={() => {
                    this._setFeedbackVisible(true);
                  }}
                >
                  <View style={styles.row}>
                    <Text style={[styles.intentionscore, styles.intent]}>{car.inten_score}%</Text>
                  </View>

                  <View style={{ flexDirection: 'row', alignItems: 'center', height: PxToDp(20), marginTop: PxToDp(5) }}>
                    <Text style={[styles.intentionName, styles.buy]}>购买意向</Text>
                  </View>
                </TouchableOpacity>
                <View style={styles.center}>
                  <Text style={[styles.intentionscore, { fontSize: 16, marginBottom: 0 }]}>
                    {this._bookDrive(car.bookdrive)}
                  </Text>
                  <Text style={[styles.intentionName]}>预约试驾</Text>
                </View>
                <View style={styles.center}>
                  <Text
                    style={[styles.intentionscore,
                    { fontSize: 16, marginBottom: 0 }]}
                  >{car.totaltime}</Text>
                  <Text style={styles.intentionName}>访问总时长(分)</Text>
                </View>
                <View style={styles.center}>
                  <Text
                    style={[styles.intentionscore,
                    { fontSize: 16, marginBottom: 0 }]}
                  >{car.looktimes}</Text>
                  <Text style={styles.intentionName}>观看次数</Text>
                </View>
              </View>
              <View style={styles.infoDown}>
                { userType && userType === 'myCustomer' ?
                  <View style={styles.row}>
                    {
                      bill ?
                        <TouchableOpacity
                          activeOpacity={0.6}
                          onPress={() => this._goPriceConfigBill()}
                          style={[styles.billBorder, styles.row]}
                        >
                          <Image source={require('../../../img/detail/dtBill.png')} />
                          <Text style={styles.billName}>价格表单</Text>
                        </TouchableOpacity> : null
                    }
                    {
                    testDrive ?
                      <TouchableOpacity
                        activeOpacity={0.6}
                        onPress={() => this._goTestDriveBill()}
                        style={[styles.billBorder, styles.row]}
                      >
                        <Image source={require('../../../img/detail/dtBill.png')} />
                        <Text style={styles.billName}>试驾信息</Text>
                      </TouchableOpacity> : null
                   }
                  </View> : null
               }
                <TouchableOpacity
                  activeOpacity={0.6}
                  style={[styles.billBorder, styles.row]}
                  onPress={() => this._goPrompt(terminology)}
                >
                  <Image source={require('../../../img/detail/dtBill.png')} />
                  <Text style={styles.billName}>销售话术</Text>
                </TouchableOpacity>
              </View>
            </View>
          </LinearGradient>
          <View style={[styles.title, styles.titleView]}>
            <Text style={styles.vehicleName}>访问过的经销店</Text>
          </View>
          <View style={styles.line} />
          {
              car.stores_look && car.stores_look.length > 0 ?
                car.stores_look.map(store => (
                  <View key={store}>
                    <View
                      style={[styles.row, styles.between, styles.storeV]}
                    >
                      <View style={styles.row}>
                        <Image source={require('../../../img/detail/dtShop.png')} />
                        <Text style={styles.storeName}>{store[1]}</Text>
                      </View>
                      <View style={styles.durationWrapper}>
                        <Text style={styles.visitDuration}>{store[0]}分</Text>
                      </View>
                    </View>
                    <View style={styles.line} />
                  </View>

                )) :
                <View>
                  <View style={styles.noView}>
                    <Text style={styles.noText}>暂未访问</Text>
                  </View>
                  <View style={styles.line} />
                </View>
            }
          <View>
            <View style={[styles.title, styles.titleView]}>
              <Text style={styles.vehicleName}>购车偏好</Text>
            </View>
            <View style={styles.line} />
            <View style={[styles.storeVisited]}>
              <View style={[styles.row, styles.storeList, styles.start]}>
                <Image source={require('../../../img/detail/dtColor.png')} />
                <Text style={styles.storeName}>车身颜色关注</Text>
              </View>
              <View
                style={[styles.row,
                ]}
              >
                <View style={[styles.row, styles.colorIcon]}>
                  <View
                    style={[styles.triangleTopleft, { borderTopColor: color && color.color_value }]}
                  />
                  <View
                    style={[styles.triangleBottomright,
                      { borderBottomColor: color && color.color_value }]}
                  />
                </View>

                <Text style={[styles.right18]}>{color && color.name}</Text>
              </View>
              <View style={styles.lineB}>
                <View style={styles.lineBottom} />
              </View>
              <View style={[styles.row, styles.storeList, styles.start]}>
                <Image source={require('../../../img/detail/dtMatch.png')} />
                <Text style={styles.storeName}>车辆选配关注</Text>
              </View>

              <View style={[styles.row, styles.attView]}>
                {
                wheelListNew && wheelListNew.length > 0
                ?
                  wheelListNew.map(item => (
                    <View
                      style={styles.attImg}
                      key={item.id}
                    >
                      <Image
                        style={[styles.img]}
                        source={item.img}
                      />
                      <Text>{item.name}</Text>
                    </View>
                  ))
                :
                  <Text style={styles.noAtten}>暂无</Text>
               }
              </View>
              <View style={styles.lineB}>
                <View style={styles.lineBottom} />
              </View>
              <View
                style={[styles.row,
                  styles.storeList, styles.start]}
              >
                <Image source={require('../../../img/detail/dtProp.png')} />
                <Text style={styles.storeName}>车身性能关注</Text>
              </View>
              <View
                style={[styles.row,
                  styles.proView]}
              >
                { focus
                      ?
                      focusNew.map(datas => (
                        <Text
                          style={[styles.yellowText, styles.proText]}
                          key={datas.id}
                        >
                          {datas.text}
                        </Text>
                      ))
                      :
                      <Text style={styles.noAtten}>
                        暂无
                      </Text>
                    }
              </View>
              <View style={styles.lineB}>
                <View style={styles.lineBottom} />
              </View>
              <View
                style={[styles.row,
                  styles.storeList, styles.start]}
              >
                <Image source={require('../../../img/detail/dtPart.png')} />
                <Text style={styles.storeName}>车身局部关注</Text>
              </View>
              <View style={[styles.row, styles.wrap, styles.proView]}>
                <Text style={[styles.proText, styles.blueText]}>{focuses[0][1].name}</Text>
                <Text style={[styles.proText, styles.blueText]}>{focuses[1][1].name}</Text>
                <Text style={[styles.proText, styles.blueText]}>{focuses[2][1].name}</Text>
                <Text style={[styles.proText, styles.blueText]}>{focuses[3][1].name}</Text>
                <Text style={[styles.proText, styles.blueText, styles.twoRow]}>
                  {focuses[4][1].name}
                </Text>
              </View>
            </View>
            <View style={styles.line} />

            <View style={[styles.title, styles.titleView]}>
              <Text style={styles.vehicleName}>偏好详情</Text>
            </View>
            <View style={styles.detailsTab}>
              <PreferDetailsNavigation
                screenProps={this.props}
                onNavigationStateChange={(
                    lastState, newState) => {
                  this.setState({ itemIndex: newState.index });
                }
                }
              />
            </View>
          </View>
        </ScrollView>
        <ModalExt
          onRequestClose={() => this._setFeedbackVisible(false)}
          animationType={'slide'}
          transparent
          visible={this.state.feedBackVisible}
          onPress={() => this._setFeedbackVisible(false)}
        >
          <PurchaseIntentionFeedback
            dispatch={dispatch}
            score={car.inten_score}
            user={user}
            onPress={() => this._setFeedbackVisible(false)}
          />
        </ModalExt>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  between: {
    justifyContent: 'space-between',
  },
  center: {
    justifyContent: 'space-between',
    alignItems: 'center',
    height: PxToDp(44),
  },
  start: {
    justifyContent: 'flex-start',
  },
  bgColor: {
    backgroundColor: '#f8f8fb',
  },
  right18: {
    color: '#8b8c8e',
    fontSize: PxToDp(15),
    marginTop: PxToDp(3),
  },
  title: {
    width: '100%',
    paddingLeft: PxToDp(20),
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  vehicleName: {
    color: '#121212',
    fontSize: PxToDp(18),
    fontFamily: FontFamilys(),
    fontWeight: 'bold',
  },
  intentionInfo: {
    height: PxToDp(107),
    backgroundColor: '#ffffff',
    opacity: 0.06,
    zIndex: 1,
  },
  infoUp: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    paddingTop: PxToDp(24),
    paddingLeft: PxToDp(12),
    paddingRight: PxToDp(12),
    paddingBottom: PxToDp(38),
  },
  infoDown: {
    flexDirection: 'row',
    width: '100%',
    paddingLeft: PxToDp(12),
    paddingTop: PxToDp(10),
    paddingBottom: PxToDp(10),
    height: PxToDp(57),
  },
  intentionscore: {
    fontSize: PxToDp(18),
    color: '#ffffff',
    fontWeight: 'bold',
    backgroundColor: 'transparent',
    zIndex: 999,
  },
  intent: {
    marginTop: PxToDp(-2),
  },
  intentionName: {
    marginTop: PxToDp(8),
    fontSize: PxToDp(12),
    color: '#c4d2ff',
    backgroundColor: 'transparent',
  },
  billBorder: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(86),
    height: PxToDp(30),
    marginRight: PxToDp(30),
  },
  storeVisited: {
    width: '100%',
    backgroundColor: '#ffffff',
    paddingBottom: PxToDp(20),
  },
  storeList: {
    alignItems: 'center',
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    marginTop: PxToDp(25),
    marginBottom: PxToDp(20),
  },
  storeName: {
    fontSize: PxToDp(15),
    color: '#000000',
    marginLeft: PxToDp(10),
  },
  durationWrapper: {
    width: PxToDp(56),
    height: PxToDp(22),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#d8d8d8',
    borderRadius: PxToDp(1),
  },
  visitDuration: {
    color: '#ffffff',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
  },
  colorIcon: {
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(12),
  },
  wrap: {
    flexWrap: 'wrap',
  },
  detailsTab: {
    height: Platform.OS === 'ios' ? PxToDp(253) : PxToDp(760),
  },
  img: {
    width: PxToDp(70),
    height: PxToDp(50),
    borderWidth: 1,
    borderColor: '#f5f5f5',
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  billName: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(12),
    color: '#ffffff',
    marginLeft: PxToDp(6),
    backgroundColor: 'transparent',
  },
  noAtten: {
    fontSize: PxToDp(15),
    color: '#8b8c8e',
    fontFamily: FontFamilys(),
    marginLeft: PxToDp(20),
  },
  titleView: {
    marginTop: PxToDp(20),
    marginBottom: PxToDp(6),
  },
  titleCar: {
    backgroundColor: 'transparent',
    color: '#ffffff',
    fontSize: PxToDp(16),
    marginLeft: PxToDp(11),
  },
  topView: {
    height: PxToDp(51),
    alignItems: 'center',
    paddingLeft: PxToDp(20),
  },
  linerTop: {
    height: PxToDp(215),
  },
  buy: {
    marginTop: PxToDp(-2),
  },
  storeV: {
    height: PxToDp(54),
    alignItems: 'center',
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    backgroundColor: '#FFFFFF',
  },
  noView: {
    height: PxToDp(54),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    backgroundColor: '#FFFFFF',
    justifyContent: 'center',
  },
  proText: {
    color: '#ffffff',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    paddingLeft: PxToDp(17),
    paddingRight: PxToDp(17),
    paddingTop: PxToDp(3),
    marginRight: PxToDp(6),
    height: PxToDp(22),
  },
  yellowText: {
    backgroundColor: '#d6cfaa',
  },
  blueText: {
    backgroundColor: '#a3bede',
  },
  proView: {
    paddingLeft: PxToDp(20),
  },
  twoRow: {
    marginTop: PxToDp(8),
  },
  lineB: {
    marginTop: PxToDp(20),
    width: '100%',
    paddingRight: PxToDp(20),
    paddingLeft: PxToDp(20),
  },
  lineBottom: {
    height: PxToDp(1),
    backgroundColor: '#dadada',
  },
  intentView: {
    height: PxToDp(107),
    width: '100%',
    position: 'absolute',
    top: PxToDp(51),
  },
  triangleTopleft: {
    width: 0,
    height: 0,
    borderTopWidth: PxToDp(28),
    borderStyle: 'solid',
    borderRightWidth: PxToDp(28),
    borderRightColor: 'transparent',
    opacity: 0.7,
  },
  triangleBottomright: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderBottomWidth: PxToDp(28),
    borderLeftColor: 'transparent',
    borderLeftWidth: PxToDp(28),
    marginLeft: PxToDp(-28),
  },
  attView: {
    paddingLeft: PxToDp(20),
    alignItems: 'center',
  },
  attImg: {
    marginRight: PxToDp(20),
  },
  line: {
    height: PxToDp(0.5),
    width: '100%',
    backgroundColor: '#e4e4e4',
  },
  noText: {
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
    color: '#999999',
  },
});

export default VehicleVisited;
